<script lang="ts" setup>
import type { UserWrapper } from '@/api/types/userWrapper'
import ProfileOrderCard from '@/components/profileOrderCard/profileOrderCard.vue'
import { UrlPath } from '@/constants'
import { t } from '@/locale/index'
import { useUserStore } from '@/store'
import { useUnifiedTokenStore } from '@/store/useUnifiedToken'

definePage({
  style: {
    navigationBarTitleText: '%tabbar.me%',
    navigationBarBackgroundColor: '#FFFFFF',
  },
})

const userStore = useUserStore()
const unifiedTokenStore = useUnifiedTokenStore()
const myOrderList = ref(t('myOrderList'))
const allOrders = ref(t('allOrders'))
// 订单部分
const orderItems = [
  {
    key: 'pending_payment',
    label: '待付款',
    icon: '/static/my/pending_payment.png',
    value: 2,
  },
  {
    key: 'pending_processing',
    label: '待受理',
    icon: '/static/my/pending_processing.png',
    value: 3,
  },
  {
    key: 'pending_service',
    label: '服务中',
    icon: '/static/my/pending_service.png',
    value: 4,
  },
  {
    key: 'pending_finish',
    label: '已完成',
    icon: '/static/my/pending_finish.png',
    value: 5,
  },

]

function goAllOrders() {
  uni.navigateTo({ url: '/pages/my-order-list/my-order-list' })
}

function handleSelect(value: number) {
  console.log('点击了', value)
  uni.navigateTo({ url: `/pages/my-order-list/my-order-list?value=${value}` })
}
// 定义列表数据类型
interface ListItem {
  id: number | string
  title: string
  icon: string
  onClick: () => void
  body?: string
  bodyClass?: string
}
const list = ref<ListItem[]>([])
const userInfo = ref<UserWrapper>()
// 模拟异步后台获取
async function fetchList() {
  // 这里可以换成你的接口请求
  const data: ListItem[] = [
    {
      id: 1,
      title: t('myWallet'),
      icon: '/static/images/my_wallet.png',
      onClick: goWallet,
      body: t('myWallet'),
      bodyClass: 'text-[#333] text-[13pt] font-sans',
    },
    {
      id: 2,
      title: t('myMandate'),
      icon: '/static/images/my_mandate.png',
      onClick: goEntrust,
      body: t('myMandate'),

      bodyClass: 'text-[#333] text-[13pt] font-sans',

    },
    {
      id: 3,
      title: t('settings'),
      icon: '/static/images/personal_settings.png',
      onClick: goProfileSettings,
      body: t('settings'),

      bodyClass: 'text-[#333] text-[13pt] font-sans',
    },
    {
      id: 4,
      title: t('aboutUs'),
      icon: '/static/images/about_us.png',
      onClick: goAboutUs,
      body: t('aboutUs'),

      bodyClass: 'text-[#333] text-[13pt] font-sans',
    },
    {
      id: 5,
      title: t('support'),
      icon: '/static/images/support.png',
      onClick: goSupport,
      body: t('support'),

      bodyClass: 'text-[#333] text-[13pt] font-sans',
    },
  ]
  // 模拟网络延迟
  list.value = data
  userInfo.value = await userStore.fetchUserInfo()
}

// 生命周期函数：组件挂载时获取列表
onMounted(async () => {
  await fetchList()
})

// 顶部头像或登录区域点击
function onHeaderClick() {
  uni.navigateTo({ url: '/pages/settings/settings' })
}

// 设置图标点击
function onSettingsClick() {
  uni.navigateTo({ url: '/pages/settings/settings' })
}

// 登录方法
/*
function handleLogin() {
  // #ifdef MP-WEIXIN
  tokenStore.wxLogin()
  // #endif
  // #ifndef MP-WEIXIN
  uni.navigateTo({ url: '/pages-fg/login/login' })
  // #endif
}
  */

// 功能列表点击封装
function goOrders() {
  uni.navigateTo({ url: '/pages/orders/orders' })
}
function goWallet() {
  uni.navigateTo({ url: '/pages/wallet/wallet' })
}
function goEntrust() {
  uni.navigateTo({ url: '/pages/entrust/entrust' })
}
function goProfileSettings() {
  uni.navigateTo({ url: '/pages/settings/settings' })
}
function goAboutUs() {
  uni.navigateTo({ url: '/pages/about/about' })
}
function goSupport() {
  uni.navigateTo({ url: `/pages/web-content/web-content?title=支持中心&url=${UrlPath.contactUrl}` })
}
</script>

<template>
  <view class="bg-[#F7F7F7]">
    <!-- 头像与用户信息 + 设置图标 -->
    <view class="flex flex-row items-start justify-between">
      <view class="mx-4 my-4 flex flex-row items-center" @click="onHeaderClick">
        <!-- 判断是否登录且头像存在 -->
        <uv-avatar
          v-if="unifiedTokenStore.isLoggedIn && userInfo?.legalUser?.headImage"
          :src="userInfo.legalUser.headImage"
          :size="80"
        />
        <!-- 已登录但头像为空，用昵称首字或默认图 -->
        <uv-avatar
          v-else-if="unifiedTokenStore.isLoggedIn"
          :size="80"
          :text="userInfo?.legalUser?.nickname?.[0] || '用户'"
        />
        <!-- 未登录 -->
        <uv-avatar v-else size="80" text="未登录" />

        <view class="profile-info ml-4">
          <text>{{ unifiedTokenStore.isLoggedIn ? (userInfo?.legalUser?.nickname || '用户') : '点击登录' }}</text>
        </view>
      </view>

      <view class="mx-4 my-4">
        <uv-icon name="setting" size="22" @click="onSettingsClick" />
      </view>
    </view>
    <ProfileOrderCard
      :title="myOrderList"
      :more-text="allOrders"
      :items="orderItems"
      @more="goAllOrders"
      @select="handleSelect"
    />
    <!-- 功能入口列表 -->
    <view class="mx-0 rounded-[28rpx] bg-[#F7F7F7]">
      <uv-list border>
        <uv-list-item
          v-for="item in list" :key="item.id" :title="item.title" link="navigateTo" border
          @click="item.onClick"
        >
          <template v-if="item.body" #body>
            <image :src="item.icon" class="mr-2 h-4 w-4 object-contain" mode="aspectFit" />
            <text :class="item.bodyClass">{{ item.body }}</text>
          </template>
        </uv-list-item>
      </uv-list>
    </view>
  </view>
</template>

<style lang="scss">
.profile-container {
  padding: 20rpx 0;
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 28rpx;
}

.profile-left {
  display: flex;
  align-items: center;
}

.profile-info {
  margin-left: 16rpx;
  font-size: 28rpx;
  color: #333;
}

.profile-functions {
  margin-top: 20rpx;
}

.uv-list-item__thumb img {
  object-fit: contain;
}
</style>
